<template>
  <el-form label-width="120px" size="small">
    <el-row>
      <el-col :span="18">
        <el-form-item label="顶部菜单">
          <el-select v-model="menuInfo.topMenuId" placeholder="请选择顶部菜单" @change="topMenuSelectChange">
            <el-option v-for="(item, index) in topMenuList" :key="item.id" :label="item.text"
              :value="item.id" ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="18">
        <el-form-item label="侧边菜单">
          <el-select v-model="menuInfo.sideMenuId" placeholder="请选择侧边菜单">
            <el-option v-for="(item, index) in sideMenuList" :key="item.id" :label="item.text"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { $SysMenuApi } from '@/network/menu/SysMenuApi.js';
export default {
  name: "FeatureConfigureMenuForm",
  data() {
    return {
      menuInfo: {
        topMenuId: "",
        sideMenuId: ""
      },
      topMenuList: [],
      sideMenuList: [],
    }
  },

  methods: {
    async loadTopMenus() {
      const res = await $SysMenuApi.listTopMenus({
        location: 'TOP',
        type: 'USER'
      })
      this.topMenuList = res.data;
    },

    // 父级菜单选择改变
    async topMenuSelectChange(topMenuId) {
       const res = await $SysMenuApi.getSubMenusByParentId(topMenuId);
       this.sideMenuList = res.data;
    },

    takeFormData() {
      const formData = {...this.menuInfo};
      return formData;
    }

  },

  created() {
    this.loadTopMenus();
  }

}
</script>

<style></style>